<script setup lang="ts">
import { computed } from 'vue';
import { ButtonTypeEnum, ButtonSizeEnum } from './types';
import type { ButtonProps } from './types';
import { EMITS_BUTTONCMP_CLICK } from '@/constants';
import MSvgIcon from '@/libs/SvgIcon';

const props = withDefaults(defineProps<ButtonProps>(), {
  icon: '',
  iconColor: '',
  iconClass: '',
  type: 'main',
  size: 'default',
  isActiveAnimation: true,
  loading: false
});

const size = computed(() => {
  return props.icon ? `icon-${props.size}` : props.size;
});

const emits = defineEmits<{
  'buttoncmp:click': [];
}>();

const onButtonClick = () => {
  if (props.loading) return;

  emits(EMITS_BUTTONCMP_CLICK);
};

defineOptions({ name: 'MButton' });
</script>

<template>
  <button
    @click.stop="onButtonClick"
    class="flex items-center justify-center rounded p-1 text-center text-sm duration-200"
    :class="[
      ButtonTypeEnum[props.type],
      ButtonSizeEnum[size as keyof typeof ButtonSizeEnum],
      { 'active:scale-105': props.isActiveAnimation }
    ]"
  >
    <MSvgIcon
      v-if="props.loading"
      name="loading"
      class="mr-1 h-2 w-2 animate-spin"
    />
    <MSvgIcon
      v-if="props.icon"
      :name="props.icon"
      class="m-auto"
      :class="ButtonSizeEnum[size as keyof typeof ButtonSizeEnum].icon"
      :color="props.iconColor"
      :fillClass="props.iconClass"
    />
    <slot v-else />
  </button>
</template>
